<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div style="margin: 10px" id="building">
        </div>
    </div>
    <div class="layuimini-main" style="width: 300px; position: absolute;">
        <ul class="storey">
        </ul>
    </div>
    <div class="layuimini-main" style="left: 315px;float:right;position: absolute;right:0px;">
        <ul class="dormitory">
            <li>
                <p>宿舍1</p>
                <ul class="bed">
                    <li>床位1</li>
                    <li>床位1</li>
                    <li>床位1</li>
                    <li>床位1</li>
                    <li>床位1</li>
                    <li>床位1</li>
                    <li>床位1</li>
                    <li>床位1</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<style>
/*楼层*/
.storey{
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.storey li{
    /*占的高度*/
    height: 50px;
    /*处理称垂直居中*/
    line-height:50px;
    /*作为一个简单的分割线*/
    border-bottom: 1px solid #f1f1f1;
    font-size: 16px;
    /*放在上面是手型*/
    cursor: pointer;
}
.storey-bg{
    background-color: #27ae60;
    color: rgb(255, 255, 255);
}
.storey>li>span{
    float: right;
    margin-right: 10px;
}
.storey>li>span>button{
    cursor: pointer;
    color: #00998b;
    background: transparent;
    border: 0px;
    font-size: 20px;
}

/*宿舍*/
.dormitory{
    /*width:1200px;*/
    height:650px;
    overflow:scroll;
}
.dormitory>li{
    margin: 5px;
    clear: both;
    text-align: center;

}
.dormitory>li>p{
    height: 40px;
    background-color: #1abc9c;
    color: rgb(255, 255, 255);
    line-height: 40px;
    font-size: 15px;
    cursor: pointer;
}
.dormitory>li>p>span{
    float: right;
    margin-right: 10px;
}
.dormitory>li>p>span>button{
    cursor: pointer;
    color: rgb(255, 255, 255);
    /*背景透明*/
    background: transparent;
    border: 0px;
    font-size: 20px;
}
/*床位*/
.bed{
    display: none;
    height: 100px;
    margin: 10px;
}
.bed li{
    font-size: 14px;
    float: left;
    width: 130px;
    height: 130px;
    border:1px solid #f0f0f0;
    margin: 10px;
    text-align: center;
    color: #27ae60;
}
.bed li:hover{
    background-color: #f0f0f0;
}
.bed li i{
    font-size: 20px;
    cursor: pointer;
}
.bed li i:hover{
    color: #00998b;
    font-size: 20px;
    cursor: pointer;
}

</style>

<script>
    layui.use(['form', 'table','miniPage','element','upload','store','jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            store = layui.store,
            miniPage = layui.miniPage;
        //获得楼宇
        function loadBuilding(){
            axios({
                method:"get",
                url:"/building/getListByType"
            }).then(res=>{
                console.log(res);
                for(let i = 0;i<res.data.buildings.length;i++){
                    //需要加一个$，转成DOM对象 不然还是一个字符传*
                    // let btnObj = $('<button style="margin: 2px" class="layui-btn layui-btn-primary layui-btn-radius building-btn" key="'+res.data.buildings[i].id+'">'+res.data.buildings[i].name+'</button>')
                    let btnObj = $('<button style="margin: 10px" class="layui-btn layui-btn-primary layui-btn-radius building-btn">'+res.data.buildings[i].name+'</button>')

                    btnObj.click(function(){
                        // console.log($(this).attr("key")) //attr() 方法设置或返回被选元素的属性值
                        // console.log("点击了~~")
                        $(this).siblings().addClass('layui-btn-primary');//siblings 所有的兄弟节点移除
                        $(this).removeClass('layui-btn-primary');
                        loadStorey(res.data.buildings[i].id)
                    })
                    $('#building').append(btnObj)
                }
                // 默认选择第一个按钮点击出现楼层
                $('#building button:first').trigger('click');
            }).catch(error=>{
                layer.msg("请求错误")
            });
        }
        loadBuilding()

        function loadStorey(buildingId){
            axios({
                method:'post',
                url:'/storey/getList/',
                data:{"buildingId":buildingId}
            }).then(res=>{
                $('.storey').empty() //empty() 方法移除被选元素的所有子节点和内容。
                for(let i = 0;i<res.data.storeys.length;i++){
                    //需要加一个$，转成DOM对象 不然还是一个字符传*
                    let liObj = $(`<li>${res.data.storeys[i].storeyNo}层</li>`)
                    liObj.click(function(){
                        $(this).siblings().removeClass('storey-bg');
                        liObj.addClass('storey-bg');
                        loadDormitory(res.data.storeys[i].id);
                    })
                    liObj.find('button').click(function (event) {
                        //如果没有添加stopPropagation，点击按钮会一起执行上面的点击方法
                        //阻止 click 事件冒泡到父元素：
                        event.stopPropagation();
                        var content = miniPage.getHrefContent('building/add.html');
                        var openWH = miniPage.getOpenWidthHeight();

                        var index = layer.open({
                            title: '添加楼层',
                            type: 1,//页面层
                            shade: 0.2,
                            maxmin:false,
                            shadeClose: true,
                            area: [openWH[0] + 'px', openWH[1] + 'px'],
                            offset: [openWH[2] + 'px', openWH[3] + 'px'],
                            content: content,
                            end:function () {//点击之后，触发点击对应的楼层
                                liObj.trigger('click');
                            }
                        });
                        $(window).on("resize", function () {
                            layer.full(index);
                        });
                        console.log("zzzzzzzz")
                    });
                    $('.storey').append(liObj)
                }
                $('.storey li:first').trigger('click');
            }).catch(error=>{
                console.log("error")
            })
        }

        function  loadDormitory(storeyId) {
            axios({
                method:"post",
                url:"/dormitory/getList/",
                data:{"storeyId":storeyId}
            }).then(res=>{
                $('.dormitory').empty() //empty() 方法移除被选元素的所有子节点和内容。
                for(let i = 0;i<res.data.dormitorys.length;i++){
                    //需要加一个$，转成DOM对象 不然还是一个字符串*
                    let htmlObj = $(`
                        <li>
                        <p >${res.data.dormitorys[i].no}

                        </p>
                        <ul class="bed"></ul>
                       </li>
                    `)
                    htmlObj.find('p').click(function(){
                        //siblings() 方法返回被选元素的所有同级元素。 包括自己
                        $(this).siblings().toggle(200);//从隐藏到显示
                        //加载床位
                        loadBed(res.data.dormitorys[i].id,htmlObj.find('p').siblings())

                    })
                    $('.dormitory').append(htmlObj)
                }
            }).catch(error=>{
                console.log("error")
            })
        }
        //传入宿舍id 当前宿舍的对象
        function loadBed(did,objbed) {
            axios({
                method:"post",
                url:"/bed/getList/",
                data:{"dormitoryId":did}
            }).then(res=>{
                objbed.empty();
                if(res.data.beds.length==0){
                    objbed.append('暂无床位信息');
                }
                for(let i = 0;i<res.data.beds.length;i++){
                    let html;
                    if(res.data.beds[i].gradeId==-1){
                      html = `
                        <li>
                            <p>床位：${res.data.beds[i].bno}</p>
                            <img src="../images/bed-un.png"} >
                            <p>未选择</p>
                        </li>
                      `;
                    }else{
                      html = `
                        <li>
                            <p>床位：${res.data.beds[i].bno}</p>
                            <img src="../images/别人床位.png"} >
                            <p>姓名：${res.data.beds[i].studentName}</p>
                            <p>年级：${res.data.beds[i].gradeId}</p>
                            <p>班级：${res.data.beds[i].className}</p>
                        </li>
                    `;
                    }
                    let htmlObj = $(html);
                    objbed.append(htmlObj);
                }
            }).catch(error=>{
                layer.msg("error")
            })
        }

    });

</script>